<template>
    <div>
      <router-link to="/product">新增</router-link>
      <table border="1">
        <tr>
          <th>序号</th>
          <th>ID</th>
          <th>商品名称</th>
          <th>商品价格</th>
          <th>创建时间</th>
          <th>操作</th>
        </tr>
        <tr v-for="(item,index) in productList">
          <td>{{index}}</td>
          <td>{{item.id}}</td>
          <td>{{item.productName}}</td>
          <td>{{item.price}}</td>
          <td>{{item.createTime}}</td>
          <td>
            <!-- v-on：可以简写为@-->
            <button @click="del(item.id)">删除</button>
            <button @click="update(item)">修改</button>
          </td>
        </tr>
      </table>
    </div>
</template>

<script>
    export default {
        name: "",
      data(){
          return{
            productList:[]
          }
        },
      methods:{
        /**
         * Access-Control-Allow-Origin 跨域问题
         * 什么是跨域？
         *  1.后台服务为了保护自己的接口，将 不是同一种请求方式，以及不同一个IP,以及不是同端口号的，拒绝访问
         *  http://ip:port 端口号不同时，发生的跨域问题。
         *  3种解决跨域的方式：
         *    1.后台来解决
         *    2.前台来解决
         *    3.使用nginx来解决
         */
        findAll:function () {
              //去后台查询数据
              this.$axios.get("/product/findAll").then(res=>{
                this.productList=res.data;
              })
          },
        del:function (id) {
          this.$axios.get("/product/deleteById?id="+id).then(res=>{
            this.findAll();
          })
        },
        update:function (item) {
          this.$router.push({name:"product",params:{"product":item}})
        }
      },
      //进入页面后首先执行的方法
      mounted(){
          this.findAll();
      }
    }
</script>

<style scoped>

</style>
